<template>
  <div class="main">
    <div class="top">
      <div class="left"><van-icon name="chat-o" /></div>
      <div class="right"><van-icon name="setting-o" /></div>
      <div class="userimg">
        <img src="../../assets/image2/img_aijiaodeng.png" alt="" />
      </div>
    </div>

    <!-- 中间宫格 -->
    <div class="mid">
      <van-grid square icon-color="red">
        <van-grid-item text="优惠券">
          <van-icon
            class="iconfont icon-youhuiquan"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="收藏">
          <van-icon
            class="iconfont icon-shizhong"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="约看">
          <van-icon
            class="iconfont icon-tousujianyi"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="订单">
          <van-icon
            class="iconfont icon-tousujianyi"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
      <van-grid square>
        <van-grid-item text="私人助理">
          <van-icon
            class="iconfont icon-24gl-headset"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="微聊">
          <van-icon
            class="iconfont icon-liaotian"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="评价">
          <van-icon
            class="iconfont icon-pingjia"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <!-- van-icon  class-prefix='icon'固定 slot='icon'表示插入到icon=''这个属性中-->
        <van-grid-item text="投诉建议">
          <van-icon
            class="iconfont icon-tousujianyi"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 宜居管家 -->
    <div class="text">
      <p>宜居管家 <span>宜居专享服务</span></p>
    </div>
    <!-- 宜居管家下宫格 -->
      <!-- 中间宫格 -->
<<<<<<< HEAD
    <div class="mid">
=======
    <div class="mid midunder">
>>>>>>> pxr
      <van-grid square icon-color="red" :column-num="3">
        <van-grid-item text="我的合同">
          <van-icon
            class="iconfont icon-shiyongwendang"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="转租">
          <van-icon
            class="iconfont icon-05"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="退租">
          <van-icon
            class="iconfont icon-loufangfangzi"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
      <van-grid square :column-num="3">
        <van-grid-item text="芝麻信用">
          <van-icon
            class="iconfont icon-zhimarenzheng"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="续租">
          <van-icon
            class="iconfont  icon-renew"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <!-- van-icon  class-prefix='icon'固定 slot='icon'表示插入到icon=''这个属性中-->
        <van-grid-item text="账单">
          <van-icon
            class="iconfont icon-zhangdan_xiangqing_o"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
<<<<<<< HEAD
=======
    <!-- 底边栏 -->
    <div class="underdiv">
       <Under></Under>
    </div>
>>>>>>> pxr
  </div>
</template>

<script>
<<<<<<< HEAD
export default {
=======
import Under from '../../components/shouyeUnder.vue'
export default {
  components:{
    Under
  },
>>>>>>> pxr
  data() {
    return {
      imgUser: "../../assets/image2/img_aijiaodeng.png",
    };
  },
};
</script>

<style scoped lang='less'>
/deep/ .main {
  font-size: 40px;
<<<<<<< HEAD
=======
  height: 100%;
>>>>>>> pxr
}
.main {
  height: 100%;
  width: 100%;
  .top {
    height: 364px;
    background: rgb(255, 86, 84);
    width: 100%;
    .left {
      float: left;
      .van-icon-chat-o {
        font-size: 40px;
        color: white;
        margin-top: 72px;
        margin-left: 20px;
      }
    }
    .right {
      float: right;
      font-size: 40px;
      color: white;
      margin-top: 72px;
      margin-right: 20px;
    }
    .userimg {
      position: absolute;
      top: 112px;
      left: 302px;
    }
  }
  /deep/ .van-grid-item__text {
    font-size: 32px;
  }
  .mid {
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgb(246, 246, 246);
    box-shadow: -5px -5px 5px rgb(246, 246, 246);
    //   height: 225px;
    margin: 20px;
    /deep/ span.van-grid-item__text {
      margin-top: 18px;
    }
    .radio {
      position: absolute;
      top: -12px;
      left: -11px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: solid 2px red;
    }

    .icon-tousujianyi,.icon-youhuiquan,.icon-jushoucang,.icon-shizhong,.icon-24gl-headset ,
    .icon-liaotian,.icon-pingjia,.icon-shiyongwendang,.icon-05,.icon-loufangfangzi,.icon-zhimarenzheng,.icon-renew,.icon-zhangdan_xiangqing_o
    {
      font-size: 40px;
      color: red;
    }
  }
  .text{
    font-size: 40px;
    margin: 10px 20px;
    span{
      font-size: 20px;
    }
  }
<<<<<<< HEAD
=======
 .midunder{
   overflow: hidden;
 }
 .underdiv{
   overflow: hidden;
   margin-top: 24px;
 }
>>>>>>> pxr
}
</style>